<template>
	<div class="container">
		<h1 class="title">Overture UI 组件预览</h1>

		<div class="component-demo">
			<h2 class="subtitle">按钮组件</h2>
			<ov-button>默认按钮</ov-button>
			<ov-button type="primary">主按钮</ov-button>
			<ov-button type="success">成功按钮</ov-button>
		</div>

		<div class="component-demo">
			<h2 class="subtitle">原生el按钮组件</h2>
			<el-button>默认按钮</el-button>
			<el-button type="primary">主按钮</el-button>
			<el-button type="success">成功按钮</el-button>
		</div>

		<div class="component-demo">
			<h2 class="subtitle">表格组件</h2>
			<ov-table :data="tableData" stripe style="width: 100%">
				<ov-table-column prop="name" label="姓名" width="180"></ov-table-column>
				<ov-table-column prop="age" label="年龄" width="100"></ov-table-column>
				<ov-table-column prop="address" label="地址"></ov-table-column>
			</ov-table>
		</div>

		<div class="component-demo">
			<h2 class="subtitle">原生el表格组件</h2>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="age" label="年龄" width="100"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
			</el-table>
		</div>

		<div class="component-demo">
			<h2 class="subtitle">btnGroup</h2>
			<ov-btn-group :config="config" @click="handleClick"></ov-btn-group>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue"

// 定义响应式数据
const tableData = ref([
	{ name: "张三", age: 25, address: "北京市朝阳区" },
	{ name: "李四", age: 30, address: "上海市浦东新区" },
	{ name: "王五", age: 28, address: "广州市天河区" }
])

const config = ref([
	{
		text: "按钮1",
		class: "btn1",
		type: "primary",
		link: true,
		disabled: false,
		round: false,
		circle: false,
		eventName: "handleClickBtn1"
	},
	{
		text: "按钮2",
		class: "btn2",
		type: "success",
		link: false,
		disabled: false,
		round: true,
		circle: false,
		eventName: "handleClickBtn2"
	},
	{
		text: "按钮3",
		class: "btn3",
		type: "danger",
		link: false,
		disabled: true,
		round: false,
		circle: true,
		eventName: "handleClickBtn3"
	}
])

// 定义按钮组方法
const handleClick = eventName => {
	console.log(`output->eventName`, eventName)

	// 使用对象字面量代替原方法中的 methods 对象
	const handlers = {
		handleClickBtn1() {
			console.log("按钮1点击事件触发")
		},
		handleClickBtn2() {
			console.log("按钮2点击事件触发")
		},
		handleClickBtn3() {
			console.log("按钮3点击事件触发")
		}
	}

	// 调用对应的处理函数
	if (handlers[eventName]) {
		handlers[eventName]()
	}
}
</script>

<style>
.container {
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.title {
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
}

.subtitle {
	font-size: 1.5rem;
	margin: 1.5rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
}

.component-demo {
	margin-bottom: 3rem;
	padding: 1rem;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>
